<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约列表</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <link rel="stylesheet" href="../static/css/appointment.css">
    <link rel="stylesheet" href="../static/css/sweetalert.css">
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/bootstrap.js"></script>
    <script src="../static/js/sweeralert.min.js"></script>
</head>
<body>
<!-- 页面上的最上面导航 -->
<nav class="navbar navbar-default">
    <div class="navbar-header" style="margin-left: 50px;margin-top: -10px">
        <a href="/index/toIndex"><h3>家政服务系统</h3></a>
    </div>

    <div>
        <ul class="nav navbar-nav">
            <li>
                <a href="/index/toIndex">
                    <span class="glyphicon glyphicon-home"></span>
                    首页
                </a>
            </li>
            <li class="register">
                <a href="/user/toRegister">
                    <span class="glyphicon glyphicon-user"></span>
                    注册
                </a>
            </li>
            <li class="log-in">
                <a href= "/user/toLogin" >
                    <span class="glyphicon glyphicon-log-in"></span>
                    登录
                </a>
            </li>
            <li class="log-out">
                <a href= "/user/logout" >
                    <span class="glyphicon glyphicon-log-out"></span>
                    退出
                </a>
            </li>
            <li class="space">
                <a href="#">个人中心</a>
                <ul class="next-menu">
                    <li>
                        <a href="/person/toPerson">个人资料</a>
                    </li>
                    <li>
                        <a href="/order/toOrder">我的订单</a>
                    </li>
                    <li>
                        <a href="/app/toCmApp">我的预约</a>
                    </li>
                </ul>
            </li>
            <li class="space">
                <a href="#">家政人员中心</a>
                <ul class="next-menu">
                    <li>
                        <a href="/hk/toHkPerson">商家资料</a>
                    </li>
                    <li>
                        <a href="/app/toHkApp">预约列表</a>
                    </li>
                    <li>
                        <a href="/order/toHkOrder">我的订单</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

    <div class="container">
        <h3>我的预约</h3>
        <div>
            <table class="table table-condensed table-hover ">
                <thead>
                    <tr style="height: 50px; line-height: 50px; background-color: #0084ff; color: #fff">
                        <th>编号</th>
                        <th>预约类型</th>
                        <th>预约的地点</th>
                        <th>预留手机号</th>
                        <th>预约时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <!--<th>1</th>-->
                        <!--<th>保姆</th>-->
                        <!--<th>南京市-玄武区-配货员</th>-->
                        <!--<th>18796283605</th>-->
                        <!--<th>2019-02-14</th>-->
                        <!--<th>-->
                            <!--<button class="btn btn-primary">申请</button>-->
                        <!--</th>-->
                    </tr>
                </tbody>
            </table>
            <ul class="page">
                <span class="prev" style="margin-right: 10px">&laquo;上一页</span>
                <span class="next">下一页&raquo;</span>
                <span>
                        共<span>0</span>页
                    </span>
                <span>
                        到第
                        <input id="pageNum" type="text">
                        页
                    </span>
                <span>
                        <input id="confPageNum" type="button" value="确定">
                    </span>
            </ul>
        </div>
    </div>
</body>
</html>
<script>

    var curWwwPath = window.location.href;
    var pathName = window.location.pathname;
    var ctx = curWwwPath.substring(0,curWwwPath.indexOf(pathName));

    $(document).ready(function () {
        loginSuccess();
        $(".log-out").click (function () {
            logout();
        })

        loadApp();
    })

    function loadApp() {
        var url = ctx + "/app/getVaildApp";
        $.ajax ({
            "url": url,
            "type": "Post",
            "success": function (json) {
                var list = json.data;
                for (var i = 0; i < list.length; i++) {
                    var optionData = "<tr>\n" +
                        "<th>#{id}</th>\n" +
                        "<th>#{type}</th>\n" +
                        "<th>#{address}</th>\n" +
                        "<th>#{phone}</th>\n" +
                        "<th>#{datetime}</th>\n" +
                        "<th>\n" +
                        "<button id='#{btn-id}' #{disabled} class=\"submit-apply btn btn-primary\">#{btn-status}</button>\n" +
                        "</th>\n" +
                        "</tr>";
                    optionData = optionData.replace("#{id}", i+1);
                    optionData = optionData.replace("#{type}", list[i].appType);
                    optionData = optionData.replace("#{address}", list[i].appAddress);
                    optionData = optionData.replace("#{phone}", list[i].appPhone);
                    optionData = optionData.replace("#{datetime}", formatDate(list[i].appBeginTime));
                    optionData = optionData.replace("#{btn-id}", list[i].id);
                    if (comphkID(list[i].applyList, list[i].hkID)) {
                        optionData = optionData.replace("#{btn-status}", "已经申请");
                        optionData = optionData.replace("#{disabled}", "disabled");
                    } else {
                        optionData = optionData.replace("#{btn-status}", "申请");
                    }
                    $("tbody").append(optionData);
                }
                submitApply();
            }
        })
    }
    
    function comphkID(list, hkID) {
        var result = false;
        for (var i = 0; i < list.length; i ++) {
            if (list[i] == hkID) {
                result = true;
                break;
            }
        }
        return result;
    }

    function submitApply() {
        $(".submit-apply").click(function () {
            $(this).text("已经申请");
            $(this).attr({"disabled": "disabled"})
            var url = ctx + "/app/apply";
            var data = "id=" + $(this).attr("id");
            $.ajax ({
                "url": url,
                "data": data,
                "dataType": "json",
                "type": "Post",
                "success": function (json) {
                    if (json.state == 200) {
                        swal({
                            title: "提醒",
                            text: "申请成功!"
                        })
                        window.location.href = "/app/toHkApp";
                    } else {
                        alert(json.message);
                        window.location.href = "/hk/toHkPerson";
                    }
                }
            })
        })
    }

    function formatDate(mills) {
        var newTime = new Date(mills);
        var year = newTime.getFullYear();
        var month = newTime.getMonth() + 1;
        var day = newTime.getDate();
        var hour = newTime.getHours();
        var minute = newTime.getMinutes();
        var second = newTime.getSeconds();
        return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
    }

    // 登录成功
    function loginSuccess() {
        $(".log-out").css({"display": "none"});
        $.ajax({
            "url": ctx + "/user/loginSuccess",
            "type": "Post",
            "success": function (json) {
                if (json.state == 200) {
                    $(".log-out").css({"display": "block"});
                    $(".log-in").css({"display": "none"});
                    $(".register").css({"display": "none"});
                }else {
                    alert("用户未登录");
                    window.location.href = "/user/toLogin";
                }
            }
        })
    }

    // 退出系统
    function logout() {
        $.ajax ({
            "url": ctx + "/user/logout",
            "type": "Post",
            "success": function (json) {
                if (json.state == 200) {
                    alert("退出成功...");
                }
            }
        })
    }


</script>